<template>
  <!-- start 工单指派 -->
  <div class="task-allot-select-container">
    
    <!-- start 选择派单 -->
    <div v-if="typeOptions.length > 1" class="task-allot-select-container-type">
      <el-radio v-if="taskPoolOn" v-model="allotType" :label="allotTypeMap.pool.value"> {{ allotTypeMap.pool.text }}</el-radio>
      <el-radio v-model="allotType" :label="allotTypeMap.normal.value"> {{ allotTypeMap.normal.text }}</el-radio>
      <el-radio v-if="autoDispatch" v-model="allotType" :label="allotTypeMap.auto.value"> {{ allotTypeMap.auto.text }}</el-radio>
      <!-- 保存至待分配列表 -->
      <el-radio v-if="typeOptions.includes('allot')" v-model="allotType" :label="allotTypeMap.allot.value"> {{ allotTypeMap.allot.text }}</el-radio>
    </div>
    <!-- end 选择派单 -->
    
    <!-- start 选择负责人/协同人 -->
    <div class="task-allot-select-container-user">
      
      <!-- start 负责人员选择 -->
      <template v-if="isShowSelectExecutor">
        <el-input
          v-if="!isOpenData"
          readonly
          :value="value.executors.map(({displayName}) => displayName).join(', ')"
          @click.native="selectExecutorUser"
          :placeholder="$t('task.tip.editTip7')"
        >
          <div class="executor-delete" slot="suffix" @click.stop="clearExecutors" v-if="value.executors.length > 0">
            <i class="iconfont icon-delete"></i>
          </div>
        </el-input>
        
        <div class="ui-input-block" @click="selectExecutorUser" v-if="isShowSelectExecutor && isOpenData">
          <span class="placeholder-text" v-if="value.executors.length <= 0">
            {{$t('task.tip.editTip7')}}
          </span>
          <div>
            <template v-if="isOpenData">
              <open-data
                v-for="(item) in value.executors"
                :key="item.staffId"
                type="userName"
                :openid="item.staffId"
              ></open-data>
            </template>
            <template v-else>
              {{ value.executors.map(({displayName}) => displayName).join(', ') }}
            </template>
          </div>
          
          <div @click.stop="clearExecutors" v-if="value.executors.length > 0">
            <i class="iconfont icon-delete"></i>
          </div>
        </div>
        
      </template>
      <!-- end 按部门人员派单 -->
      <!-- end 负责人员选择 -->
      
      <!-- start 协同人员选择 -->
      <div class="task-allot-select-synergies" @click="selectSynergiesUser">
        <span class="task-allot-select-synergies-placeholder" v-if="value.synergies.length <= 0">{{$t('task.tip.editTip9')}}</span>
        <template v-else>
          <div class="task-allot-select-synergy" v-for="(item, index) in value.synergies" :key="item.userId">
            <template v-if="isOpenData">
              <open-data type="userName" :openid="item.staffId"></open-data>
            </template>
            <template v-else>
              <span>{{ item.displayName }}</span>
            </template>
            <i class="iconfont icon-delete" @click.stop="deleteSynergies(index)"></i>
          </div>
        </template>
      </div>
      <!-- end 协同人员选择 -->
      
    </div>
    <!-- end 选择负责人/协同人 -->
    
  </div>
  <!-- end 工单指派 -->
</template>

<script>
/* api */
import { BaseSelectUserModeEnum } from '@src/component/common/BaseSelectUser/model/enum'
/* component */
import ContactUserItem from '@src/component/common/BaseContact/ContactUserItem.vue'
/* model */
import { isOpenData } from '@src/util/platform'
import { t } from '@src/locales'
import { isEmpty } from 'pub-bbx-utils'
export default {
  name: 'task-allot-select',
  props: {
    taskConfig: {
      type: Object,
      default: () => ({})
    },
    editValue: {
      type: Object,
      default: () => ({})
    },
    /** 可以选择的派单类型 */
    typeOptions: {
      type: Array,
      default: () => ['pool', 'normal', 'auto', 'allot']
    }
  },
  data() {
    return {
      isOpenData,
      allotType: 'normal',
      allotTypeMap: {
        pool: {
          text: t('task.edit.allotToPool'),
          value: 'pool'
        },
        normal: {
          text: t('task.edit.allotToManager'),
          value: 'normal'
        },
        auto: {
          text: t('task.detail.components.autoAllot'),
          value: 'auto'
        },
        allot: {
          text: t('task.edit.saveToAllotList'),
          value: 'waitDistribution'
        }
      },
      value: {
        executors: [],
        synergies: []
      },
    }
  },
  components: {
    [ContactUserItem.name]: ContactUserItem
  },
  computed: {
    /* 自动派单 */
    autoDispatch() {
      return this.taskConfig?.autoDispatch === true;
    },
    /* 是否显示选择负责人 */
    isShowSelectExecutor() {
      return this.allotType === this.allotTypeMap.normal.value;
    },
    /* 是否开启工单池 */
    taskPoolOn() {
      return this.taskConfig.taskPoolOn === true && this.typeOptions.includes('pool');
    }
  },
  watch: {
    'allotType'(newValue) {
      this.$emit('update:type', newValue);
    },
    typeOptions(newVal) {
      // 只有一项选项，赋值allotType
      if(Array.isArray(newVal)) {
        if(newVal.length === 1) {
          this.allotType = newVal[0];
        }
      }
    },
    editValue: {
      deep: true,
      immediate: true,
      handler(newValue) {
        if (!isEmpty(newValue)) {
          this.allotType = newValue.allotType || 'normal'
          this.value.executors = newValue.executors || []
          this.value.synergies = newValue.synergies || []
        }
      }
    },
  },
  methods: {
    clearExecutors() {
      this.value.executors = [];
    },
    deleteSynergies(index) {
      this.value.synergies.splice(index, 1);
      this.$emit('update:synergies', this.value.synergies)
    },
    emitUpdateExecutor() {
      this.$emit('update:executors', this.value.executors)
    },
    /** 选择协同人人员  */
    selectSynergiesUser() {
      let options = {
        title: t('task.tip.editTip6'),
        max: 100,
        selected: this.value.synergies,
        mode: BaseSelectUserModeEnum.Filter
      };
      this.$fast.select.multi.user(options)
        .then(res => {
          if(res.status != 0) return
          this.value.synergies = res?.data?.users || [];
          this.$emit('update:synergies', this.value.synergies);
        })
        .catch(err => {
          console.warn(err)
        })
    },
    /** 选择负责人人员  */
    selectExecutorUser() {
      let options = {
        title: t('task.tip.editTip7'),
        max: 1,
        selected: this.value.executors,
        mode: BaseSelectUserModeEnum.Filter
      };
      
      this.$fast.select.single.user(options)
        .then(res => {
          if(res.status != 0) return
          this.value.executors = res?.data?.users || [];
          this.emitUpdateExecutor()
        })
        .catch(err => {
          console.warn(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.task-allot-select-container {
  padding: 20px 0;
  &-type {
    margin-bottom: 10px;
    display: flex;
  }
  &-user {
    ::v-deep .el-input {
      padding: 5px 0;
    }
    ::v-deep .el-input__suffix {
      cursor: pointer;
      height: 32px;
      top: 5px;
      right: 10px;
      display: flex;
      align-items: center;
      &:hover i { 
        color: #ed3f14;
      }
    }
    .ui-input-block {
      display: flex;
      justify-content: space-between;
      margin: 5px 0;
    }
  }
  .placeholder-text,
  .biz-team-select-placeholder,
  .task-allot-select-synergies-placeholder {
    color: rgb(193, 196, 203) !important;
    font-size: 13px !important;
    padding: 0 10px !important;
  }
  .placeholder-text {
    padding: 0 !important;
  }
}

.task-allot-select-synergies {
  border-radius: 2px;
  border: 1px solid $border-color-base;
  line-height: 32px;

  display: flex;
  flex-wrap: wrap;
  align-items: center;

  &:hover {
    border-color: #7ddddd;
    cursor: text;  
  }
}

.task-allot-select-synergy {
  background-color: #f0f2f5;
  height: 22px;
  margin: 3px;
  padding: 0 5px;
  color: #909399;
  border-radius: 4px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;

  span{
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    line-height: 100%;
  }
  
  i{
    cursor: pointer;
    margin-left: 2px;
    font-size: 13px;
    line-height: 13px;
  }
}
</style>